<template>
  <div class="case">
    <banner img="../assets/img/bgtop.jpg" title="开设楼盘" />
    <div class="case-section" v-loading="loading">
      <div class="case-section-content">
        <div class="case-section-content-list" v-for="(cas, index) in caseList" :key="index">
          <!-- 使用 getFirstImageUrl 方法获取 content 中的第一个图片链接 -->
          <img v-lazy="getFirstImageUrl(cas.content)" alt />
          <div class="content-list-abstract" :class="{ 'abstract-active': index % 2 != 1 }">
            <p class="abstract-title">{{ cas.title }}</p>
            <!-- 使用 v-html 渲染过滤掉图片后的 content -->
            <div class="abstract-content" v-html="truncateContent(stripImages(cas.content))"></div>
            <div class="more">
              <router-link class="text-decoration" :to="{ name: 'caseDetails', params: { id: cas.id } }">
                <span>MORE </span>
                <i class="el-icon-caret-right"></i>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Banner from "../components/Banner";
import DOMPurify from "dompurify";

export default {
  components: {
    Banner,
  },
  data() {
    return {
      loading: true,
      caseList: [],
      truncateLength: 100 // 默认小屏截断长度
    };
  },
  methods: {
    // 获取 content 中的第一个图片链接
    getFirstImageUrl(content) {
      const imgRegex = /<img[^>]+src="([^">]+)"/;
      const match = content.match(imgRegex);
      return match ? match[1] : "";
    },
    // 过滤掉 content 中的图片标签
    stripImages(html) {
      return DOMPurify.sanitize(html.replace(/<img[^>]*>/g, ""));
    },
    // 对处理后的内容进行截断并添加省略号
    truncateContent(content) {
      if (content.length > this.truncateLength) {
        return content.slice(0, this.truncateLength) + '...';
      }
      return content;
    },
    setTruncateLength() {
      if (window.innerWidth > 750) {
        this.truncateLength = 500;
      } else {
        this.truncateLength = 100;
      }
    }
  },
  mounted() {
    window.console.log("case");
    this.setTruncateLength();
    window.addEventListener('resize', this.setTruncateLength);
    this.$http
      .get("case/all")
      .then((response) => {
        // 按时间排序，假设案例数据中有 createTime 字段表示创建时间
        this.caseList = response.data.sort((a, b) => {
          return new Date(b.createTime) - new Date(a.createTime);
        });
        this.loading = false;
      })
      .catch(function (error) {
        window.console.log(error);
      });
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setTruncateLength);
  },
};
</script>
<style lang="scss" scoped>
@keyframes flipVerticalEnterAnimation {
  0% {
    transform: perspective(800px) rotateX(100deg);
    transition-timing-function: cubic-bezier(0.1,
        0.1,
        0.4,
        1); // 关键帧内过渡效果设置为弹簧效果曲线
  }

  50% {
    transform: perspective(800px) rotateX(-30deg);
    transition-timing-function: cubic-bezier(0.1, 0.1, 0.4, 1);
  }

  100% {
    transform: perspective(800px) rotateX(0deg);
    transition-timing-function: cubic-bezier(0.1, 0.1, 0.4, 1);
  }
}

@keyframes imgZoom {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.04); // 这里设置放大到原来的1.2倍，你可以根据需求调整这个倍数
  }

  100% {
    transform: scale(1);
  }
}

.case {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  &-section {
    width: 100%;

    &-content {
      min-height: 1000px;
      background-color: #fff;

      &-list {
        width: 100%;
        padding: 8vw 0;
        display: flex;
        justify-content: center;
        align-items: start;
        animation: flipVerticalEnterAnimation 1s cubic-bezier(0.1, 0.1, 0.4, 1); // 将动画的过渡效果设置为弹簧效果曲线，动画持续时间设为1秒，可按需调整
        animation-fill-mode: forwards;

        img {
          align-self: center;
          margin-top: 20px;
          width: 45vw;
          transition: transform 0.3s ease-in-out; // 添加过渡效果，让放大和缩小的过程更平滑，这里设置过渡时间为0.3秒，可根据需求调整

          &:hover {
            animation: imgZoom 0.6s ease-in-out; // 当鼠标悬停时，应用定义好的imgZoom动画，设置动画持续时间为0.5秒，可根据需求调整
          }
        }

        .content-list-abstract {
          width: 35vw;
          display: flex;
          padding-left: 5%;
          flex-direction: column;

          .abstract-title {
            font-size: 20px;
            color: #001529;
            font-weight: bold;
          }

          .abstract-content {
            color: #484848;
            font-size: 15px;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            white-space: normal !important;
            word-wrap: break-word;
            //border: 1px solid pink;
          }

          .more {
            display: flex;
            justify-content: flex-end;

            .text-decoration {
              font-weight: bold;
              text-decoration: none;

              color: grey;
            }
          }

          .more:hover {
            .text-decoration {
              color: red;
            }
          }
        }

        .abstract-active {
          order: -1;
          padding-right: 5%;
          padding-left: 0%;
        }
      }

      @media screen and (max-width: 750px) {
        &-list {
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 20px 0;

          .content-list-abstract {
            width: 88%;
            padding-left: 0%;
          }

          img {
            width: 88%;
          }

          .abstract-active {
            order: 1;
            padding-right: 0%;
            padding-left: 0%;
          }
        }
      }
    }
  }
}
</style>